<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>flati | responsive html5 template | themeforest | josweb</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,300' rel='stylesheet' type='text/css'>
<!--[if IE]>
	<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:400" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet" type="text/css">
<![endif]-->

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/theme.css" rel="stylesheet">
<link href="css/colour.css" rel="stylesheet" type="text/css"/>
<link href="css/prettyPhoto.css" rel="stylesheet" type="text/css"/>

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>
<!--header-->
	<div class="header">
<!--menu-->
    <nav id="main_menu" class="navbar" role="navigation">
      <div class="container">
            <div class="navbar-header">
        <!--toggle-->
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
				<i class="fa fa-bars"></i>
			</button>
		<!--logo-->
			<div class="logo">
				<a href="index.html"><img src="img/logo.png" alt="" class="animated bounceInDown" /></a> 
			</div>
		</div>
           
            <div class="collapse navbar-collapse" id="menu">
                <ul class="nav navbar-nav pull-right">
                   			<li class="dropdown"><a href="javascript:{}">Home</a> 
							<ul class="dropdown-menu">
							<li><a href="index.html">Slider Revolution</a></li>
							<li><a href="index2.html">Nerve Slider</a></li>
							<li><a href="index3.html">NivoSlider</a></li>
							<li><a href="index4.html">Slides</a></li>
							<li><a href="index5.html">Html5 Video</a></li>
						</ul>
							</li>
							<li class="dropdown active"><a href="javascript:{}">Pages</a>
						<ul class="dropdown-menu">
								<li><a href="team.html">The Team</a></li>
								<li><a href="about.html">About</a></li>
								<li><a href="services.html">Services</a></li>
								<li><a href="testimonials.html">Testimonials</a></li>
								<li><a href="timeline.html">Timeline</a></li>
								<li><a href="full.html">Full Width</a></li>
								<li><a href="left_sidebar.html">Left Sidebar</a></li>
								<li><a href="right_sidebar.html">Right Sidebar</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Work</a>
						<ul class="dropdown-menu">
								<li><a href="portfolio_2columns.html">2 Columns</a></li>
								<li><a href="portfolio_3columns.html">3 Columns</a></li>
								<li><a href="portfolio_4columns.html">4 Columns</a></li>
								<li><a href="portfolio_masonry.html">Masonry</a></li>
								<li><a href="gallery.html">Paginated Gallery</a></li>
								<li><a href="video_gallery.html">Video Gallery</a></li>
								<li><a href="single_portfolio.html">Single Slider</a></li>
								<li><a href="single_video.html">Single Video</a></li>
								<li><a href="single_image.html">Single Image</a></li>
								<li><a href="full_slider.html">Full Slider</a></li>
								<li><a href="full_video.html">Full Video</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Style</a>
						<ul class="dropdown-menu">
								<li><a href="scaffolding.html">Scaffolding</a></li>
								<li><a href="shortcodes.html">Shortcodes</a></li>
								<li><a href="icons.html">Icons</a></li>
								<li><a href="script_examples.html">JS Examples</a></li>
								<li><a href="javascript:{}">Sub Menu</a>
							<ul class="dropdown-menu sub-menu">
								<li><a href="#">Sub One</a></li>
								<li><a href="#">Sub Two</a></li>
								<li><a href="#">Sub Three</a></li>
								<li><a href="#">Sub Four</a></li>
							</ul>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Extras</a>
						<ul class="dropdown-menu">
								<li><a href="dribbble_stream.html">Dribbble Stream</a></li>
								<li><a href="alt_footer.html">Alt. Footer & Boxes</a></li>
								<li><a href="pricing_table.html">Pricing Table</a></li>
								<li><a href="404.html">404 Page</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Blog</a>
						<ul class="dropdown-menu">
								<li><a href="blog.html">Blog</a></li>
								<li><a href="blog_two.html">Blog II</a></li>
								<li><a href="blog_post.html">Blog Post</a></li>
								<li><a href="blog_post2.html">Blog Post II</a></li>
						</ul>
							</li>
							<li><a href="contact.html">Contact</a></li>
						</ul>
					</div>
				</div>
			</nav>
		</div>
	<!--//header-->
	
	<!--page-->
	<div id="banner">
		<div class="container intro_wrapper">
			<div class="inner_content">
				<h1>Skills and Goals</h1>
					<h1 class="title">All About Us</h1>
						<h1 class="intro">
							Web design is the creation of <span class="hue">digital environments</span>, that <span>facilitate</span> and encourage human activity; 
							<span>reflect </span> or adapt to individual voices and content. - Jeffrey Zeldman
						</h1>
					</div>
				</div>
			</div>
		<div class="container wrapper">
	<div class="inner_content">
		<div class="row pad30">
<!--col 1-->		
		<div class="col-sm-4 col-md-4">
			<div class="animated bounceInLeft"><i class="fa fa-bolt colour big"></i></div>
		<h2>Our Philosophy</h2>
			<p>
				<span>Wullam ligula sapien, pharetra eget volutpat vel, consequat in lectus. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
				Class aptent taciti sociosqu ad litora torquent per conubia nostra.</span>
			</p>
			<p>
				Wullam ligula sapien, pharetra eget volutpat vel, consequat in lectus sed do. 
				<a href="#" data-rel="tooltip" data-placement="top" title="Here is the sample of tooltip that contains three lines or more.">
				<strong>Hover here to see a Tooltip</strong></a> eiusmod tempor incididunt ut labore et dolore magna aliqua. 
			</p>
			<div class="pad25"></div>
			</div>
<!--col 2-->					
		<div class="col-sm-4 col-md-4">
			<div class="animated bounceInDown"><i class="fa fa-cogs colour big"></i></div>
		<h2>Our Mission</h2>
			<p>
				Mauris viverra, tortor eget interdum lacinia, lacus mi tempor purus, eu commodo enim dui ac nisl. Morbi euismod ante quis tellus imperdiet porta. 
				Morbi nisi nibh, facilisis a varius.
			</p>
					<ul class="fa-ul">
						<li><i class="fa-li fa fa-check colour"></i> Responsive Design</li>
						<li><i class="fa-li fa fa-check colour"></i> One font, 249 icons</li>
						<li><i class="fa-li fa fa-check colour"></i> Powerful front-end framework</li>
						<li><i class="fa-li fa fa-check colour"></i> Built with Twitter Bootstrap</li>
					</ul>
					<div class="pad25"></div>
				</div>
<!--col 3-->					
		<div class="col-sm-4 col-md-4">
		<div class="animated bounceInRight"><i class="fa fa-lightbulb-o colour big"></i></div>
		<h2>Our Process</h2>
			<p>
				Mauris viverra, tortor eget interdum lacinia, lacus mi tempor purus, eu commodo enim dui ac nisl. Morbi euismod ante quis tellus imperdiet porta. 
				Morbi nisi nibh, facilisis a varius.
			</p>
					<ul class="fa-ul">
						<li><i class="fa-li fa fa-desktop colour"></i> Powerful front-end framework</li>
						<li><i class="fa-li fa fa-laptop colour"></i> Built with Twitter Bootstrap</li>
						<li><i class="fa-li fa fa-tablet colour"></i> CSS3 Animations</li>
						<li><i class="fa-li fa fa-mobile-phone colour"></i> One font, 249 icons</li>
					</ul>
				<div class="pad25"></div>
				</div>
					</div>
					
				<div class="row">
					<div class="col-md-8">
					
					<!--skill bars-->
						<h2>Our Skills</h2>
						
					<div class="progress">
					<div class="bar" data-percentage="85">
						</div>
					</div>	
					<small>WEB DESIGN</small>
					
					<div class="progress">
						<div class="bar" data-percentage="90">
						</div>
					</div>
					<small>GRAPHIC DESIGN</small>
				
					<div class="progress">
						<div class="bar" data-percentage="70">
						</div>
					</div>
					<small>PHOTOSHOP</small>
				</div>
				
				<!--testimonial-->
				<div class="col-md-4 pad25">
				<div class="testimonial1">
				<p>
					<i class="fa fa-comments fa-4x pull-left hue"></i>
					Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. 
					Vivamus purus arcu, commodo cursus egestas et, dictum lobortis dui. Curabitur at mi eu mi sollicitudin faucibus at at libero.
				</p>
				</div>
					<div class="center">
					<p><small>QUOTE AUTHOR</small></p>
				</div>
					<div class="pad45 hidden-md hidden-lg"></div>
				</div>
			</div>
				</div>
					</div>
					
			<!--strip-->
				<div class="strip">
					<h1 class="center">Get A Free Quote</h1>
					<h3 class="center about_strip">
						Ecilisis venenatis risus, suspendisse ac nec et. Nulla sed mauris, congue duis proin nonummy. Elementum phasellus mauris sed nulla sed, egestas 
						feugiat a dictum libero  vivamus purus arcu, commodo cursus egestas.
					</h3>
					<a href="contact.html" class="big_button">Contact Us Today</a>
				</div>
			<!--/strip-->
				
		<!--footer-->
		<div id="footer2">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
				<div class="copyright">
							FLATI
							&copy;
							<script type="text/javascript">
							//<![CDATA[
								var d = new Date()
								document.write(d.getFullYear())
								//]]>
								</script>
							 - All Rights Reserved :
							Template by <a href="http://spiralpixel.com">Spiral Pixel</a>
						</div>
						</div>
					</div>
				</div>
					</div>
				<!-- up to top -->
				<a href="#"><i class="go-top fa fa-angle-double-up"></i></a>
				<!--//end--> 
				
<!-- scripts -->
<script src="js/jquery.js"></script>			
<script src="js/bootstrap.min.js"></script>
<script src="js/retina.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<!-- skills -->
<script>
//<![CDATA[
 setTimeout(function(){
 $('.progress .bar').each(function() {
            var me = $(this);
            var perc = me.attr("data-percentage");
			 var current_perc = 0;
			var progress = setInterval(function() {
                if (current_perc>=perc) {
                    clearInterval(progress);
                } else {
                    current_perc +=1;
                    me.css('width', (current_perc)+'%');
                }
				me.text((current_perc)+'%');
			}, 20);
		});
	},300);
	 //]]>
</script>
					
</body>
</html>